.pagination {
    .page-item {
        color: $grey-600;
        background: transparent;
        margin-left: 1px;
        margin-right: 1px;
        line-height: 175%;

        .page-link {
            background: transparent;
        }

        a {
            color: $grey-600;
            border: 1px solid transparent;
            border-radius: 8px !important;
        }

        a:hover {
            color: $blue-300;
            background-color: $grey-100;
            border: 1px solid $grey-300;
            border-radius: 8px;
        }

        .page-link-next-previous {
            background: $grey-200;
            border-radius: 12px;
            border: 1px solid rgba($blue-300, 0.1);
            color: $blue-300;
            padding-top: 8px;
            padding-bottom: 8px;
            justify-content: center;
            align-items: center;

            .vapor-icon {
                background-color: $blue-300;
            }
        }

        @include media-breakpoint-up(lg) {
            .page-link-next-previous {
                .vapor-icon {
                    height: 15px;
                    width: 15px;
                }
            }

            .page-link-previous {
                padding-right: 16px;

                .vapor-icon {
                    margin-left: -3px;
                    margin-right: 5px;
                }
            }
    
            .page-link-next {
                padding-left: 16px;

                .vapor-icon {
                    margin-left: 5px;
                    margin-right: -3px;
                }
            }
        }

        .page-link-next-previous:hover {
            color: $blue-400;
            border-radius: 12px;

            .vapor-icon {
                background-color: $blue-400;
            }
        }
    }

    .disabled {
        .page-link {
            color: $blue-400;
            background-color: $grey-100;
            border: 1px solid $grey-300;
        }
    }

    .active {
        .page-link {
            color: $grey-800;
            background-color: $grey-100;
            border: 1px solid $grey-300;
            border-radius: 8px;
        }
    }

    .pagination-ellipsis {
        margin-top: 5px;
    }
}